<template>
  <view-box class="TJhome" bodyPaddingTop="0" bodyPaddingBottom="0">
    <tab>
      <tab-item selected @on-item-click="onItemClick(1)">服务接口挂接</tab-item>
      <tab-item @on-item-click="onItemClick(2)">政务数据</tab-item>
      <tab-item @on-item-click="onItemClick(3)">证照数据</tab-item>
    </tab>
    <div class="chartbox" v-show="show1">
      <v-chart ref="demo" :data="data">
        <v-scale x field="月份" />
        <v-scale y field="月均降雨量" />
        <v-bar series-field="name" adjust="stack" />
        <v-tooltip show-value-in-legend />
      </v-chart>
      <x-button type="primary" plain @click.native="$refs.demo.rerender()">rerender</x-button>
    </div>
    
     <div class="chartbox" v-show="show2">
      <v-chart ref="demo1" :data="data">
        <v-scale x field="月份" />
        <v-scale y field="月均降雨量" />
        <v-bar series-field="name" adjust="stack" />
        <v-tooltip show-value-in-legend />
      </v-chart>
    </div>
     <div class="chartbox" v-show="show3">
      <v-chart ref="demo2" :data="data">
        <v-scale x field="月份" />
        <v-scale y field="月均降雨量" />
        <v-bar series-field="name" adjust="stack" />
        <v-tooltip show-value-in-legend />
      </v-chart>

      <x-button type="primary" plain @click.native="$refs.demo.rerender()">chui</x-button>
    </div>
  </view-box>
</template>
  <script>
import {
    ViewBox,
    Tab,
    TabItem,
    VChart,
    VLine,
    VArea,
    VTooltip,
    VLegend,
    VBar,
    XButton,
    VScale
} from "vux";
// import {
//   mapState, mapMutations, mapGetters, mapActions
// } from "vuex";
export default {
    name: "TJhome",
    components: {
        ViewBox,
        Tab,
        TabItem,
        VChart,
        VLine,
        VArea,
        VTooltip,
        VLegend,
        VBar,
        XButton,
        VScale
    },
    data() {
        return {
            show1:true,
            show2:false,
            show3:false,
            searchValue: "1",
            results: [1, 2, 34, 5, 6],
            data: [
                { name: "London", 月份: "Jan.", 月均降雨量: 18.9 },
                { name: "London", 月份: "Feb.", 月均降雨量: 28.8 }
            ]
        };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        onFocus() {},
        onCancel() {},
        onSubmit(keytext) {
            this.$refs.search.setBlur();
            this.$vux.toast.show({
                type: "text",
                position: "top",
                text: keytext
            });
            this.results = [1, 2, 3];
        },
        onChange(keytext) {
            this.results = [11, 22, 33];
        },
        onItemClick(val){
          if(val==1){
            this.show1=true;
            this.show2=false;
            this.show3=false;
          }
          else if(val==2){
            this.show1=false;
            this.show2=true;
            this.show3=false;
          }
          else if(val==3){
            this.show1=false;
            this.show2=false;
            this.show3=true;
          }
        }
    }
};
</script>
<style lang="less">
.TJhome {
  .chartbox{
    width: 100%;
  }
}
</style>